<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作日志管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
    /* 基础样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    body {
        background: #f8fafc;
    }

    .module-section {
        padding: 2rem;
        max-width: 1600px;
        margin: 0 auto;
    }

    .card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        padding: 2rem;
        margin-bottom: 2rem;
        border: 1px solid #e5e7eb;
    }

    .module-title {
        font-size: 1.8rem;
        color: #1f2937;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #f3f4f6;
    }

    /* 过滤表单 */
    .filter-form {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        margin-bottom: 2rem;
        background: #f9fafb;
        padding: 1.5rem;
        border-radius: 8px;
    }

    .form-group {
        margin-bottom: 0;
    }

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        color: #374151;
        font-size: 0.95rem;
        font-weight: 500;
    }

    input, select {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-size: 1rem;
        background: white;
    }

    /* 日志表格 */
    .log-table {
        width: 100%;
        border-collapse: collapse;
        background: white;
        border-radius: 8px;
        overflow: hidden;
    }

    .log-table thead {
        background: #f9fafb;
    }

    .log-table th {
        padding: 1.25rem;
        color: #374151;
        font-weight: 600;
        text-align: left;
        border-bottom: 2px solid #e5e7eb;
    }

    .log-table td {
        padding: 1.25rem;
        border-bottom: 1px solid #f3f4f6;
        color: #4b5563;
        font-size: 0.95rem;
    }

    .log-table tr:hover td {
        background: #f9fafb;
    }

    /* 状态徽章 */
    .log-badge {
        display: inline-flex;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 500;
        align-items: center;
        gap: 0.5rem;
    }

    .log-success {
        background: #f0fdf4;
        color: #22c55e;
    }

    .log-warning {
        background: #ffedd5;
        color: #f97316;
    }

    .log-danger {
        background: #fee2e2;
        color: #ef4444;
    }

    /* 操作详情 */
    .log-detail {
        max-width: 400px;
        white-space: pre-wrap;
        line-height: 1.5;
    }

    /* 分页 */
    .pagination {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
        padding: 1.5rem 0;
    }

    .page-btn {
        padding: 0.5rem 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        background: white;
        cursor: pointer;
        transition: all 0.2s;
    }

    .page-btn.active {
        background: #4f46e5;
        color: white;
        border-color: #4f46e5;
    }

    /* 响应式设计 */
    @media (max-width: 1280px) {
        .filter-form {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .filter-form {
            grid-template-columns: 1fr;
        }
        
        .log-table td {
            padding: 1rem;
        }
        
        .module-section {
            padding: 1rem;
        }
    }

    @media (max-width: 480px) {
        .log-table {
            display: block;
            overflow-x: auto;
        }
    }
    </style>
</head>
<body>
    <div class="module-section">
        <div class="card">
            <h2 class="module-title">
                <i class="fas fa-history" style="color: #4f46e5;"></i>
                系统操作日志
            </h2>

            <!-- 过滤表单 -->
            <form class="filter-form">
                <div class="form-group">
                    <label>操作时间</label>
                    <input type="date">
                </div>
                
                <div class="form-group">
                    <label>操作类型</label>
                    <select>
                        <option value="">全部类型</option>
                        <option>登录</option>
                        <option>商品修改</option>
                        <option>订单操作</option>
                        <option>系统设置</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>操作人员</label>
                    <input type="text" placeholder="输入用户名">
                </div>

                <div class="form-group">
                    <label>操作结果</label>
                    <select>
                        <option value="">全部结果</option>
                        <option>成功</option>
                        <option>失败</option>
                        <option>异常</option>
                    </select>
                </div>
            </form>

            <!-- 日志表格 -->
            <table class="log-table">
                <thead>
                    <tr>
                        <th style="width: 150px;">操作时间</th>
                        <th style="width: 120px;">操作类型</th>
                        <th>操作详情</th>
                        <th style="width: 100px;">操作人员</th>
                        <th style="width: 120px;">IP地址</th>
                        <th style="width: 100px;">操作结果</th>
                    </tr>
                </thead>
                <tbody id="log-table-body"></tbody>
            </table>

            <!-- 分页 -->
            <div class="pagination" id="pagination"></div>
        </div>
    </div>
    <script>
    (function() {
        const filterForm = document.querySelector('.filter-form');
        const tableBody = document.querySelector('#log-table-body');
        const paginationEl = document.querySelector('#pagination');
        let currentPage = 1;
        const perPage = 10;

        function getFilters() {
            return {
                date: filterForm.querySelector('input[type="date"]').value,
                type: filterForm.querySelectorAll('select')[0].value,
                user: filterForm.querySelector('input[type="text"]').value,
                result: filterForm.querySelectorAll('select')[1].value
            };
        }

        function fetchLogs() {
            const { date, type, user, result } = getFilters();
            const params = new URLSearchParams({ page: currentPage, size: perPage });
            if (date) params.append('date', date);
            if (type) params.append('op_type', type);
            if (user) params.append('user', user);
            if (result) params.append('result', result);
            fetch(`/api/logs?${params.toString()}`)
                .then(res => res.json())
                .then(resp => {
                    if (!resp.success) throw new Error(resp.message || '加载日志失败');
                    renderTable(resp.data);
                    const totalPages = Math.ceil(resp.total / perPage) || 1;
                    renderPagination(totalPages);
                }).catch(console.error);
        }

        function getBadgeHTML(result) {
            if (result === '成功') return `<span class="log-badge log-success"><i class="fas fa-check-circle"></i>${result}</span>`;
            if (result === '失败') return `<span class="log-badge log-danger"><i class="fas fa-times-circle"></i>${result}</span>`;
            return `<span class="log-badge log-warning"><i class="fas fa-exclamation-triangle"></i>${result}</span>`;
        }

        function renderTable(logs) {
            tableBody.innerHTML = '';
            logs.forEach(log => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${log.timestamp}</td>
                    <td>${log.op_type}</td>
                    <td class="log-detail">${log.detail || ''}</td>
                    <td>${log.user}</td>
                    <td>${log.ip}</td>
                    <td>${getBadgeHTML(log.result)}</td>
                `;
                tableBody.appendChild(tr);
            });
        }

        function renderPagination(totalPages) {
            paginationEl.innerHTML = '';
            for (let i = 1; i <= totalPages; i++) {
                const btn = document.createElement('button');
                btn.className = `page-btn${i === currentPage ? ' active' : ''}`;
                btn.textContent = i;
                btn.addEventListener('click', () => {
                    if (i !== currentPage) {
                        currentPage = i;
                        fetchLogs();
                    }
                });
                paginationEl.appendChild(btn);
            }
        }

        // 监听表单中所有可输入字段变化
        filterForm.addEventListener('input', () => { currentPage = 1; fetchLogs(); });
        filterForm.addEventListener('change', () => { currentPage = 1; fetchLogs(); });
        // 初始加载日志
        fetchLogs();
    })();
    </script>
</body>
</html>